<template>
   <div>
    <a-form
    layout="inline"
    :model="formState"
  >
    <a-form-item>
      <a-input v-model:value="formState.formname" placeholder="FormName">
        <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button
        type="primary"
        html-type="submit"
        :disabled="formState.formname === ''"
        @click="sendData()"
      >
        Select
      </a-button>
      <a-button
        type="primary"
        html-type="submit"
        :disabled="formState.formname === ''"
        @click="deleteData()"
        style="margin-left: 10px;"
      >
        Delete
      </a-button>
    </a-form-item>
    <a-space wrap style="margin-left: 900px;">
        <a-button type="primary" @click="save">保存</a-button>
     </a-space>
  </a-form>
    </div>
    <div style="margin-top: 50px;">
      <form-create :option=soptions v-model="formData" v-model:api="formApi" :rule="formRules"  @sumbit="save"/>
    </div>
  </template>
  
  <script lang="ts" setup name="RoleList">

  const formData = ref();
  const formApi = ref(null);
  import formCreate from '@form-create/ant-design-vue';
  import { onMounted, reactive, ref} from 'vue';
    import axios from 'axios';
    const formState = reactive({
           formname: '',
     });
    let formRules = ref()
    let soptions=ref()
        function sendData(){
         axios.post('http://127.0.0.1:8080/form/select',{
            formName: formState.formname
         }).then((res)=>{ 
          if(res.data!=''){
               const {rules, options} = res.data;
               formRules.value = formCreate.parseJson(rules);
               soptions.value = formCreate.parseJson(options);
          }else
               alert("无此表单")
          }).catch(error => {
            // 错误处理
            console.log('无此表单'+soptions.value)
          }
          )
        }
        function deleteData(){
         axios.post('http://127.0.0.1:8080/form/delete',{
            formName: formState.formname
         }).then((res)=>{
            if(res.data==0){
              alert('无此表单')
            } else if(res.data==1){
              alert('删除成功')
            }
          }).catch(error => {
             
            // 错误处理
            alert('无此表单')
          }
          )
        }
        function save(){
            axios.post('http://127.0.0.1:8080/userData/save',{
            formName: formState.formname,
            formData: JSON.stringify (formData.value),
            
         }).then((res)=>{
          if(res.data==1){
            alert('保存数据成功')
          }else
            alert('保存数据失败')
          }).catch(error => {
             
            // 错误处理  
            alert('保存数据失败')
          }
          )
        }


   
  </script>